<template>
  <div>
    <transition name="fade">
      <div v-if="visible" class="filterbarpop-wrap" :style="{'top': bgTop + 'px'}">
        <div class="filterbarpop-bg" :style="{'top': bgTop + 'px'}" @click="closeDialog" />
        <div class="filterbarpop">
          <div v-show="hasTabHeader" class="tab-bar">
            <a
              v-for="(tab, index) in menu.tabs"
              href="javascript:;"
              :style="{'flex': column}"
              role="button"
              :class="{'selected': selectIndexTab == index}"
              @click="clickTab(tab, index)"
            ><span :class="tab.icon" />{{ tab.name }}</a>
          </div>
          <div class="main">
            <div class="main-sidebar" :class="{'full-line': !items,'bg-style':items,'line-style':!items,}">
              <div
                v-for="(sidemenu, index) in sideMenus.detailList"
                v-if="menu.type !== 'filter'"
                class="item"
                :class="{'selected': currentSelectIndex == index}"
                @click="clickSidebar(sidemenu, index)"
              >
                <span :class="sidemenu.icon" />{{ sidemenu.name }}
              </div>
              <div v-for="(sm, _index) in menu.tabs" v-if="menu.type == 'filter'">
                <div class="filter-name">{{ sm.name }}</div>
                <div class="filter-item">
                  <span v-for="(sidemenu, index) in sm.detailList" class="item-operation" :class="{'multi-selected': sidemenu.selectIndex == index}" @click="clickFilterbar(sm, _index, index)">
                    {{ sidemenu.name }}
                  </span>
                </div>
              </div>
              <div v-if="menu.type == 'filter'" class="filter-btns">
                <a href="javascript:;" role="button" @click="handleClean">取消</a>
                <a href="javascript:;" role="button" @click="handleEnsure">确认</a>
              </div>
            </div>
            <div v-if="items" class="main-list line-style">
              <span v-for="(item, index) in items.list" class="item" :class="{'selected': currentSelectIndex == sideMenus.selectIndex && items.selectIndex == index}" @click="clickItem(item, index)">{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    menu: {
      type: Object
    },
    showDialog: {
      type: Boolean,
      default: true
    },
    hasTabHeader: {
      type: Boolean,
      default: true
    },
    filterTop: {
      type: String
    }
  },
  data() {
    return {
      selectIndexTab: 0,
      currentSelectIndex: 0,
      sideMenus: {},
      items: {},
      column: '',
      visible: false,
      top: 1,
      bgTop: 0,
      range: {}
    }
  },
  watch: {
    showDialog(v) {
      this.visible = v
      if (v) {
        // 初始化数据
        this.initData()
      }
    },
    menu(m) {
      // 根据tabs数量计算列宽
      this.column = '0 0 ' + 100 / m.tabs.length + '%'
      // 初始化数据
      this.initData()
    }
  },
  mounted() {
    this.bgTop = document.querySelector('.filterbar').offsetHeight + this.filterTop / 1
  },
  methods: {
    // 初始化数据
    initData(tabIndex) {
      var tmpTabIndx = 0
      tabIndex === undefined ? tmpTabIndx = this.menu.selectIndex : tmpTabIndx = tabIndex
      // 判断tabindex的范围是否在数组内
      if (tmpTabIndx >= 0 && tmpTabIndx < this.menu.tabs.length) {
        this.selectIndexTab = tmpTabIndx
      } else {
        this.selectIndexTab = 0
      }
      // 确认选中tab的一级列表
      this.sideMenus = this.menu.tabs[this.selectIndexTab]
      // 如果当前选中tab是对应选中结果的tab
      // debugger;
      if (this.selectIndexTab == this.menu.selectIndex) {
        this.currentSelectIndex = this.sideMenus.selectIndex
      }
      // else{
      //   this.sideMenus.selectIndex = -1;
      //   this.currentSelectIndex = -1;
      // }
      // 判断是否包含二级列表，包含则赋值
      // 如果一级列表的选中状态正确，则查询二级列表
      if (this.currentSelectIndex >= 0 && this.currentSelectIndex < this.sideMenus.detailList.length) {
        // 判断是否有二级列表
        if (this.sideMenus.detailList[this.currentSelectIndex].list) {
          this.items = this.sideMenus.detailList[this.currentSelectIndex]
        } else {
          // 不显示二级列表
          this.items = false
        }
      } else { // 如果一级列表选中状态不正确，按第一项的的数据判断
        // 判断是否有二级列表
        if (this.sideMenus.detailList[0].list) {
          // 显示空的二级列表
          this.items = []
        } else {
          // 不显示二级列表
          this.items = false
        }
      }
    },
    // 修改选项
    changeSelect(index) {
      // 记录tabIndex
      this.menu.selectIndex = this.selectIndexTab
      // 记录一级列表选项
      this.sideMenus.selectIndex = this.currentSelectIndex
      if (this.items) {
        // 确认二级列表选项
        this.items.selectIndex = index
        // 显示名称
        this.menu.name = this.items.list[this.items.selectIndex].name
        this.menu.value = this.items.list[this.items.selectIndex].value
      } else {
        // 显示名称
        this.menu.name = this.sideMenus.detailList[this.sideMenus.selectIndex].name
        this.menu.value = this.sideMenus.detailList[this.sideMenus.selectIndex].value
      }
      this.$emit('changeSelect')
      this.closeDialog()
    },
    // 帅选修改选项
    changeRangeSelect() {
      this.menu.name = '筛选'
      for (var i in this.range) {
        if (Object.keys(this.range[i].value).length == 0) {
          delete this.range[i]
        }
      }

      this.menu.value = Object.keys(this.range).length > 0 ? this.range : ''
      this.$emit('changeSelect')
      this.closeDialog()
    },
    // 选择Tab菜单
    clickTab(tab, index) {
      if (index !== this.selectIndexTab) {
        // 根据选中的tab初始化数据
        this.initData(index)
        this.$emit('changeTab', {
          tab,
          index
        })
      }
    },
    // 筛选方法
    clickFilterbar(v, I, i) {
      v.detailList[i].selectIndex = i
      // debugger
      if (!this.range[I]) {
        this.range[I] = { name: v.name, type: v.type, value: {}}
        this.range[I].value[i] = v.detailList[i]
        // this.range[I].value[i] = v.detailList[i].value
      } else {
        if (!this.range[I].value[i]) {
          // this.range[I].value[i] = v.detailList[i].value
          this.range[I].value[i] = v.detailList[i]
        } else {
          delete this.range[I].value[i]
          v.detailList[i].selectIndex = -1
        }
      }
    },
    // 点击左侧列表
    clickSidebar(v, i) {
      if (this.currentSelectIndex !== i) {
        this.currentSelectIndex = i
        // 存在二级列表
        if (this.sideMenus.detailList[this.currentSelectIndex].list) {
          this.items = this.sideMenus.detailList[this.currentSelectIndex]
        } else {
          // 只有一级列表，记录选项，退出
          this.changeSelect()
        }
        this.$emit('changeMainItem', {
          v,
          i
        })
      }
    },
    // 点击右侧列表
    clickItem(v, i) {
      // 只有一级列表，记录选项，退出
      this.changeSelect(i)
    },
    // 关闭弹框
    closeDialog() {
      this.visible = false
      this.$emit('closeDialog')
    },
    // 提交已选内容
    handleEnsure() {
      this.changeRangeSelect()
      this.$emit('changeMainItem', this.range)
      // this.closeDialog();
    },
    // 清除已选内容
    handleClean() {
      this.menu.tabs.map(item => {
        item.detailList.map(_item => {
          _item.selectIndex = -1
        })
      })
      this.range = {}
    }
  }
}
/**
   TODOS:
   1. 需要一个属性去辨别帅选项
   2. 多选
   3. 添加多选框
   */
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity .5s
  }
  .fade-enter,
  .fade-leave-active {
    opacity: 0
  }
  .filterbarpop-wrap {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    max-height: 100%;
    .filterbarpop-bg {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      background: rgba(0, 0, 0, .6);
    }
    .filterbarpop {
      position: absolute;
      width: 100%;
      border-top: 1px solid #ccc;
      .tab-bar {
        width: 100%;
        display: flex;
        display: -ms-flexbox;
        display: -moz-box;
        display: -webkit-box;
        display: -webkit-flex;
        flex-directives: row;
        -webkit-flex-direction: row;
        align-items: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        height: 40px;
        .selected {
          border-bottom: 2px solid orange;
          box-sizing: border-box;
        }
        a {
          background: #fff;
          height: 100%;
          line-height: 40px;
          text-decoration: none;
          color: #323232;
          text-align: center;
        }
      }
      .main {
        display: flex;
        display: -webkit-flex;
        flex-direction: row;
        -webkit-flex-direction: row;
        height: 250px;
        background: #fff;
        .main-sidebar {
          flex: 0 0 50%;
          overflow: auto;
          width: 100%;
        }
        .full-line {
          flex: 0 0 100%;
          div {
            text-align: left; // text-indent: 1.5em;
          }
        }
        .item-operation {
          display: inline-block;
          padding: 10px 4px 10px 4px;
          border: 1px solid rgb(91, 149, 255);
          border-radius: 3px;
          height: 0;
          line-height: 1px;
        }
        .multi-selected {
          background: rgb(91, 149, 255);
          color: #fff !important;
        }
        .filter-item {
          border-top: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          padding: 13px 0 5px 10px;
          span {
            margin-right: 8px;
            margin-bottom: 8px;
          }
        }
        .filter-name {
          padding: 10px 0 10px 10px;
        }
        .filter-btns {
          display: flex;
          display: -webkit-flex;
          flex-direction: row;
          -webkit-flex-direction: row;
          justify-content: space-around;
          -webkit-box-pack: space-around;
          -moz-box-pack: space-around;
          -ms-flex-pack: space-around;
          position: absolute;
          bottom: -40px;
          width: 100%;
          line-height: 40px;
          z-index: 100;
          background: #fff;
          a {
            display: block;
            width: 100%;
            text-align: center;
            text-decoration: none;
            color: #ccc;
            border-top: 1px solid #ccc;
            &:last-child {
              background: #39f;
              color: #fff;
            }
          }
        }
        .main-list {
          flex: 0 0 50%;
          overflow: auto;
          span:active {
            background: #f5f5f5;
          }
        }
        .line-style {
          .item {
            text-align: left;
            margin-left: 10px;
            padding-left: 15px;
            border-bottom: 1px solid #ccc;
            position: relative;
            &.selected {
              color: orange;
              border-color: orange;
              span {
                color: orange;
              }
            }
            .checkbox {
              position: absolute;
              right: 50px;
              top: 10px;
            }
          }
        }
        .bg-style {
          .item {
            background-color: #f5f5f5;
            &.selected {
              background-color: #FFF;
            }
          }
        }
        .item {
          display: inline-block;
          height: 40px;
          background: #fff;
          line-height: 40px;
          width: 100%;
          text-decoration: none;
          color: #444;
          span {
            font-size: 14px;
            color: #888;
            margin-right: 10px;
            vertical-align: middle;
          }
          &:active {
            color: #fff;
          }
        }
      }
    }
  }
</style>
